<template>
	<view class="wapper">
		<view class="banner" v-if="type != 3 && isShowBanner">
			<image :src="IMGLink +'/index/free-deposit-banner.png'" mode="widthFix" alt="">
		</view>
		<commodityList :list="commodityList" @commodity_click='commodityClick'></commodityList>
		<view style="height: 80rpx;background-color: transparent;"></view>
	</view>
</template>

<script>
	import commodityList from '../components/commodity-list.vue'
	import {
		topicList,
		topicGoodsList
	} from '../../../api/index/index'
	export default {
		components: {
			commodityList: commodityList
		},
		data() {
			return {
				IMGLink: this.IMGLink,
				commodityList: [],
				type: 5, // 1 新人专区  3 拼购试玩  5 免保证金  
				page: 1,
				page_size: 5,
				topicId: null,
				total: 0,
				isShowBanner:true
			}
		},
		onLoad(optios) {
			if (optios.title) {
				uni.setNavigationBarTitle({
					title: optios.title || ''
				})
			}
			if(optios.isShowBanner){
				this.isShowBanner = false
			}
			if (optios.type) {
				this.type = optios.type;
			}
			topicList({
				type: Number(optios.type)
			}).then(({
				data
			}) => {
				this.topicId = data[0].id;
				this.getTopicGoodsList()
			})

		},
		methods: {
			onReachBottom() {
				const {
					page,
					commodityList,
					total
				} = this;
				if (commodityList.length < total) {
					this.page += 1
					this.getTopicGoodsList(true)
				}
			},
			getTopicGoodsList(isLoad = false) {
				topicGoodsList({
					id: this.topicId,
					page: this.page,
					page_size: this.page_size
				}).then(({
					data: {
						list,
						total
					}
				}) => {
					const data = isLoad ? [...this.commodityList, ...list] : list
					this.commodityList = data;
					this.total = total
				})
			},
			commodityClick(data) {
				let url = '/pages/shopping/commodity/detail/index?id=' + encodeURIComponent(data.id)+'&index=1';
				if (data.topic_id) {
					url += '&topic_id=' + data.topic_id
				}
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>
<style>
	page {
		background: #EFF0F1;
	}
</style>
<style scoped>
	image {
		display: block;
		width: 100%;
	}

	.wapper {
		background: #EFF0F1;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.banner {
		margin-top: 30rpx;
		height: 262rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}
</style>
